<template>
  <div class="guide-container">
    <div class="header-container">
      <div class="left" @tap="backToIndex()">
        <i class="iconfont icon-back"></i>
      </div>
      <div class="center">到达指引</div>
      <div class="right"></div>
    </div>
    <div class="main-container">
      <view class="parking-map-container">
        <movable-area class="parking-map-movable-area" :scale-area="true">
          <movable-view
            class="parking-map-movable-view"
            :direction="'all'"
            x="-400"
            :scale-value="scalingValue"
            :scale="true"
            :style="{
              width: width,
              height: height,
            }"
            @change="movableViewChange"
            @scale="movableViewChange"
          >
            <img
              src="http://yph.hendyne.cn/map/park_map_15.jpg"
              alt=""
              srcset=""
              :mode="'aspectFill'"
              :style="{
                width: width,
                height: height,
              }"
            />
          </movable-view>
        </movable-area>
        <!-- <view class="control-btn parking" @click="showParkingList">P</view> -->
        <!-- <view class="control-btn recharge" @click="showParkingList">$</view> -->
        <!-- <view class="control-btn applycard" @click="showParkingList">C</view> -->
        <!-- <view class="control-btn pay" @tap="pay">$</view> -->
        <popup
          ref="parkingListDialop"
          :animation="true"
          type="bottom"
          :maskClick="true"
        >
          <view class="list-container" @tap="$refs.parkingListDialop.close()">
            <list v-for="i in allParkInfo" :key="i">
              <view class="list-item">
                <span style="font-weight: bold; margin-right: 5px">{{
                  i.name
                }}</span>
                <span style="font-size: 12px; margin-right: 5px">
                  <span style="font-weight: bold">总车位：</span
                  >{{ i.totalSet }}
                </span>
                <span style="font-size: 12px">
                  <span style="font-weight: bold">空余车位：</span
                  >{{ i.nullSet }}
                </span>
              </view>
            </list>
          </view>
        </popup>
      </view>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';

import Popup from '../../components/uni-popup/uni-popup.vue';
import List from '../../components/uni-list/uni-list.vue';

export default Vue.extend({
  components: { Popup, List },
  data() {
    return {
      width: "auto",
      height: "auto",
      left: 0,
      top: 0,
      startX: 0,
      startY: 0,
      scalingIndex: 5,
      scalingArray: [0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5],

      ismove: false,
      parkingListDialopVisible: false,

      allParkInfo: []
    };
  },
  computed: {
    scalingValue() {
      return (this as any).scalingArray[(this as any).scalingIndex];
    }
  },
  mounted() {
    (this as any).initImage();
    (this as any).getAllParkInfo();
    (this as any).getRouterNode();
  },
  methods: {
    initImage() {
      const sysinfo = uni.getSystemInfoSync();
      if (sysinfo.windowWidth > sysinfo.windowHeight) {
        (this as any).width = 100 * (this as any).scalingValue + "%";
        (this as any).height = "auto";
        (this as any).y = "-50%";
      } else {
        (this as any).width = "auto";
        (this as any).height = 100 * (this as any).scalingValue + "%";
        (this as any).x = "-50%";
      }
    },
    // touchmove(e: any) {
    //   if (this.ismove) {
    //     console.log(e);
    //     this.left = this.left + (e.changedTouches[0].pageX - this.startX);
    //     this.top = this.top + (e.changedTouches[0].pageY - this.startY);
    //     this.$nextTick(() => {
    //       this.startX = e.changedTouches[0].pageX;
    //       this.startY = e.changedTouches[0].pageY;
    //     });
    //   }
    // },
    // touchstart(e: any) {
    //   console.log(e);
    //   this.ismove = true;
    //   this.startX = e.changedTouches[0].pageX;
    //   this.startY = e.changedTouches[0].pageY;
    // },
    // touchend(e: any) {
    //   console.log(e);
    //   this.ismove = false;
    // },
    scalingUp() {
      if ((this as any).scalingIndex + 1 >= (this as any).scalingArray.length) {
        uni.showToast({
          title: "已到最大缩放"
        });
        return;
      }
      (this as any).scalingIndex = (this as any).scalingIndex + 1;
      (this as any).initImage();
    },
    scalingDown() {
      if ((this as any).scalingIndex - 1 < 0) {
        uni.showToast({
          title: "已到最小缩放"
        });
        return;
      }
      (this as any).scalingIndex = (this as any).scalingIndex - 1;
      (this as any).initImage();
    },
    showParkingList() {
      (this.$refs['parkingListDialop'] as any).open();
    },
    movableViewChange({detail}: any) {
      (this as any).top = detail.y;
      (this as any).left = detail.x
    },
    getAllParkInfo() {
      (this as any).$mainApi.apiAllParkInfo().then((res: any) => {
        (this as any).allParkInfo = res.data;
      });
    },
    pay() {
      uni.navigateTo({
        url: "/pages/parking/numberInput?next_path=" + encodeURI("/pages/parking/payQrcode")
      });
    },
    getRouterNode() {
      this.$mainApi.apiGetRouteGuidances().then((res: any) => {
        console.log(res);
        const startArr = [];
        const endArr = [];
        res.data.list.forEach((node: any) => {

        });
      });
    },
    backToIndex() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
})
</script>
<style scoped>
.guide-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header-container {
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
}

.image-map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.canvas {
  width: 100%;
  height: 100%;
}

.ctrl-btn-group {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
}

.canvas-contrl {
  width: 45px;
  height: 45px;
  font-size: 24px;
  padding: 5px;
  box-shadow: 0px 0px 15px #ccc;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parking-map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parking-map-movable-area {
  width: 100%;
  height: calc(100% - 50px);
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

.control-btn {
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background-color: #006b65;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.control-btn.push {
  bottom: 65px;
  right: 101px;
}

.control-btn.subtract {
  bottom: 65px;
  right: 58px;
}

.control-btn.parking {
  bottom: 65px;
  right: 15px;
}

.control-btn.recharge {
  bottom: 108px;
  right: 15px;
}

.control-btn.applycard {
  bottom: 151px;
  right: 15px;
}

.control-btn.pay {
  bottom: 194px;
  right: 15px;
}

.list-container {
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list-container >>> .uni-list {
  padding: 2.5px 15px;
  align-items: flex-start;
  background-color: transparent;
  border: unset
}

.list-container >>> .list-item {
  border-radius: 15px;
  background-color: rgba(255, 255, 255, .7);
  box-shadow:2px 2px 5px #333333;
}

.list-container >>> .uni-list--border-top {
  background-color: transparent;
}

.list-container >>> .uni-list--border-bottom {
  background-color: transparent;
}

.list-item {
  color: #666666;
  font-size: 14px;
  padding: 15px 15px;
}
</style>